<template>
<div class="home">
    <!-- 搜索 -->
    <van-search v-model="searchVal" shape="round" placeholder="请输入搜索关键词" disabled @click="$router.push('/home/searchPopup')" />
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skyblue">
        <van-swipe-item v-for="(item,index) in bannerList" :key="index">
            <img :src="item.image_url" alt="">
        </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <van-grid :column-num="5">
        <van-grid-item @click="goChannel()" v-for="item in channelList" :key="item.id" :icon="item.icon_url" :text="item.name" />
    </van-grid>
    <!-- 品牌制造商直供 -->
    <div class="brand">
        <div class="home_title">品牌制造商直供</div>
        <ul>
            <li v-for="item in brandList" :key="item.id" @click="goBrand(item.id)">
                <img :src="item.pic_url" alt="">
                <h4>{{item.name}}</h4>
                <p>{{item.floor_price | RMBfilter}}</p>
            </li>
        </ul>
    </div>
    <!--  周一周四·新品首发 组件化开发-->
    <div class="newproduct">
        <div class="home_title">周一周四·新品首发</div>
        <Products :productsList="newGoodsList" />
    </div>
    <!-- 人气推荐 -->
    <div class="hotgoodslist">
        <div class="home_title">人气推荐</div>
        <ul>
            <li v-for="item in hotGoodsList" :key="item.id">
                <div class="left">
                    <img :src="item.list_pic_url" alt="">
                </div>
                <div class="right">
                    <h3>{{item.name}}</h3>
                    <h4>{{item.goods_brief}}</h4>
                    <p>{{item.retail_price | RMBfilter}}</p>
                </div>
            </li>
        </ul>
    </div>
    <!--       专题精选-->
    <div class="topic">
        <div class="home_title">专题精选</div>
        <van-swipe :loop="false">
            <van-swipe-item v-for="item in topicList" :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <p class="p1">
                    {{item.title}}
                    <span>{{item.price_info | RMBfilter}}</span>
                </p>
                <p class="p2">{{item.subtitle}}</p>
            </van-swipe-item>
        </van-swipe>
    </div>
    <!--       居家 组件化-->
    <HomeCategoryList :categoryList="categoryList" />
    <transition name="van-slide-right">
        <router-view></router-view>
    </transition>
</div>
</template>

<script>
import HomeCategoryList from '../../components/HomeCategoryList.vue'
import Products from '../../components/Products.vue'
export default {
    components: {
        Products,
        HomeCategoryList
    },
    data() {
        return {
            // 搜索数据
            searchVal: '',
            // 轮播数据列表
            bannerList: [],
            // 宫格数据列表
            channelList: [],
            // 品牌制造商数据列表
            brandList: [],
            // 人气推荐数据列表
            hotGoodsList: [],
            // 周一周四·新品首发
            newGoodsList: [],
            // 专题精选数据列表
            topicList: [],
            //居家
            categoryList: [], 
        }
    },
    async created() {
        const res = await this.$http.get('/index/index')
        const {
            data
        } = res.data
        this.bannerList = data.banner
        this.channelList = data.channel
        this.brandList = data.brandList
        this.hotGoodsList = data.hotGoodsList
        this.newGoodsList = data.newGoodsList
        this.topicList = data.topicList
        this.categoryList = data.categoryList;
    },
    methods:{
        goChannel(){
            this.$toast.loading('功能有待开发')
        }
    }
}
</script>

<style lang="less" scoped>
/* 轮播图 */
.my-swipe {
    height: calc(400 * 100vw / 750);
}

.my-swipe .van-swipe-item img {
    width: 100%;
}

.brand {
    background-color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
}

.brand .home_title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
}

.brand ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.brand li {
    width: 49%;
    position: relative;
}

.brand li img {
    width: 100%;
}

.brand ul li h4 {
    position: absolute;
    top: 20px;
    left: 10px;
}

.brand ul li p {
    color: #8b0000;
    position: absolute;
    top: 40px;
    left: 10px;
}

.newproduct {
    background-color: #fff;
}

.newproduct .home_title {
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.product {
    margin-bottom: -60px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
}

.product li {
    width: 49%;
    text-align: center;
}

.product li img {
    width: 100%;
}

.product li h4 {
    font-size: 14px;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product li p {
    color: darkred;
}

.hotgoodslist {
    background-color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
}

.hotgoodslist .home_title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
}

.hotgoodslist ul li {
    padding: 12px;
    display: flex;
}

.hotgoodslist ul li .left {
    width: 30%;
}

.hotgoodslist ul li .right {
    width: 69%;
    text-align: left;
    padding-left: 10px;
}

.hotgoodslist ul li .left img {
    width: 100%;
}

.hotgoodslist ul li .right h3 {
    max-height: 32px;
    font-weight: 500;
    line-height: 29px;
    font-size: 18px;
}

.hotgoodslist ul li .right h4 {
    margin: 14px 0;
}

.hotgoodslist ul li .right p {
    line-height: 20px;
    color: #8d0000;
}

.topic {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    background-color: #fff;

    .home_title {
        font-size: 20px;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }

    .van-swipe {
        text-align: left;

        .van-swipe-item {
            margin-right: 15px;
            padding-left: 10px;

            img {
                width: 100%;
                height: 200px;
            }

            .p1 {
                line-height: 40px;
                font-size: 16px;
                /* text-overflow: ellipsis; 省略符号来代表被修剪的文本。 */
                text-overflow: ellipsis;
                overflow: hidden;
                /* white-space: nowrap 不换行 */
                white-space: nowrap;
                /* width: 90%; */

                span {
                    color: #8b0000;
                }
            }

            .p2 {
                /* 1. 文字显示不开，是否开启换行   nowrap：不换行*/
                white-space: nowrap;
                /* 2. 超出的隐藏 */
                overflow: hidden;
                /* 3. 文字溢出的时候，用省略号显示 */
                text-overflow: ellipsis;
                width: 90%;
                /* padding: 10px */
                /* margin-left: 30px; */
            }
        }
    }
}
</style>
